<script setup>
import Cropper from '@/components/cropper/IconCrop.vue'
import {userIcon} from "@/components/userInfo.js";

const url =  '/user/updateIcon'


</script>

<template>
    <div class="img-card">
        <div class="demo-image">
            <div key="contain" class="block">
                <span class="demonstration">当前头像</span>
                <el-image style="width: 150px; height: 150px" :src="userIcon" fit="contain" />
            </div>
        </div>
        <div class="demo-image">
            <div key="contain" class="block">
                <span class="demonstration">上传新头像</span>
                <Cropper :aspect-ratio="1" :get-url=url ></Cropper>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.demo-image .block {
    padding: 30px 0;
    text-align: center;
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    margin: 0 auto;
}
.demonstration {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center;
    vertical-align: bottom;
    display: block;
}
</style>